<script setup lang="ts">
    import { useAdmin } from '@/stores/admin' //导入admin状态文件
    import { ref } from 'vue' //引入vue函数

    //执行方法获得adminStore对象
    const adminStore = useAdmin()

    //用户头像
    const headImage = ref("")
    if(adminStore.admin.avatar == ""){
        headImage.value = "/images/avatar-default.png"
    }
    else{
        headImage.value = adminStore.admin.avatar
    }
</script>

<template>
    <section class="login_state">
        <div>
            <div><img :src="headImage" /></div>
            <div>{{ adminStore.admin.username }}</div>
        </div>
        <div>登录时间：{{ adminStore.admin.loginTime }}</div>
        <div>登录地点：{{ adminStore.admin.loginPlace }}</div>
    </section>
</template>

<style scoped>
    .login_state{
        border:1px solid #E4E7ED;
        border-radius: 5px;
        width:25%;
        box-shadow: 0px 0px 5px 5px #E4E7ED;
        margin:20px;
    }
    .login_state > div:first-child{
        display:flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:1px solid #E4E7ED;
    }
    .login_state > div:first-child > div{
        margin:10px 20px;
        font-size:20px;
    }
    .login_state > div:not(:first-child){
        line-height: 30px;
        margin:10px 20px;
    }
    .login_state img{
        width:50px;
        height:50px;
    }
</style>
